<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Title -->
    <title>Personal Homepage</title>

    <!-- Favicon Ico -->
    <link rel="shortcut icon" href="favicon.ico">

    <!-- =============================
                stylesheets
    ================================== -->

    <!-- Normalize And Bootstrap -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Google Font  -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.min.css">
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:600,700,400,300' rel='stylesheet' type='text/css'>

    <!-- Font Icons -->
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" />

    <!-- Plugin Default Stylesheets -->
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/slider-pro.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <link rel="stylesheet" href="css/animate.css">

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css" />
    <link rel="stylesheet" href="css/color.css" id="colors" />

    <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <script type="text/javascript" src="js/selectivizr.js"></script>
    <![endif]-->
</head>

<body>
    <!-- Preloader -->
    <div class="preloader">
        <div class="status"></div>
    </div>

    <!-- =============================
                    Header
    ================================== -->
    <header>
        <!-- Navigation Menu start-->
        <nav class="navbar blete-main-menu" role="navigation">
            <div class="container">

                <!-- Navbar Toggle -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Logo -->
                    <a class="navbar-brand" href="index.html"><b class="logo" id="logo">Personal Homepage</b></a>
                </div>
            </div>
        </nav>
        <!-- Navigation Menu end-->
    </header>
    <!-- Header End -->


    <!-- =============================
                Main Slider
    ================================== -->
    <section class="slider-pro blete-slider" id="blete-slider">
        <div class="sp-slides">

            <!-- Slides -->
            <div class="sp-slide blete-main-slides">
                <div class="blete-img-overlay"></div>

                <img class="sp-image" src="images/img-header/slider-img-1.jpg" alt="Slider 1"/>

                <h1 class="sp-layer blete-slider-text-big"
                data-position="center" data-show-transition="left" data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
                    Monaco
                </h1>

                <p class="sp-layer"
                data-position="center" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="right">
                    Morning in <span class="blete-highlight-text">Monaco</span>
                </p>
            </div>
            <!-- Slides End -->

            <!-- Slides -->
            <div class="sp-slide blete-main-slides">
            <div class="blete-img-overlay"></div>
                <img class="sp-image" src="images/img-header/slider-img-2.jpg" alt="Slider 2"/>

                <h1 class="sp-layer blete-slider-text-big"
                 data-position="center" data-show-transition="left" data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
                    Grand Canal
                </h1>

                <p class="sp-layer"
                 data-position="center" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="right">
                    Nightscape of <span class="blete-highlight-text">Venice</span> Grand Canal
                </p>
            </div>
            <!-- Slides End -->

            <!-- Slides -->
            <div class="sp-slide blete-main-slides">
                <div class="blete-img-overlay"></div>

                <img class="sp-image" src="images/img-header/slider-img-3.jpg" alt="Slider 3"/>

                <h1 class="sp-layer blete-slider-text-big"
                data-position="center" data-show-transition="left" data-hide-transition="right" data-show-delay="1000" data-hide-delay="200">
                    Icelandic
                </h1>

                <p class="sp-layer"
                data-position="center" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="right">
                   <span class="blete-highlight-text">Icelandic </span> Coastal Landscape
                </p>

            </div>
            <!-- Slides End -->

        </div>
    </section>
    <!-- Main Slider End -->

    <!-- =============================
                    About Section
    ================================== -->
    <section id="about" class="blete-section-wrapper">
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2>Name: <span class="blete-highlight-text">韩一博</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">我是一个20岁，充满青春活力、阳光开朗的毕业生。我喜欢旅行、听音乐、享受快乐、记录生活。上面的轮播图，是我看到的很不错的风景，分享给你，那也是我想去的地方。</p>
                </div>
                <!-- Section Header End -->

                <!-- What We Do -->
                <div class="blete-what-we-do">

                    <div class="col-md-4 col-sm-4 col-xs-12 blete-blurb-round-icon wow bounceInLeft">
                        <div class="blete-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <h3>HTML5</h3>
                    </div>

                    <div class="col-md-4 col-sm-4 col-xs-12 blete-blurb-round-icon wow bounceInLeft" data-wow-delay=".5s">
                        <div class="blete-icon">
                            <i class="fa fa-css3"></i>
                        </div>
                        <h3>CSS3</h3>
                    </div>

                    <div class="col-md-4 col-sm-4 col-xs-12 blete-blurb-round-icon wow bounceInRight" data-wow-delay=".5s">
                        <div class="blete-icon">
                            <i class="fab fa-node-js"></i>
                        </div>
                        <h3>JavaScript</h3>
                    </div>
                </div>
                <!-- What We Do End -->

            </div>
        </div>
    </section>
    <!-- About Section End -->


    <!-- =============================
                    Featuers Section
    ================================== -->
    <section id="features" class="blete-section-wrapper blete-features-section" data-stellar-background-ratio="0.5">
        <div class="blete-parallax-overlay"></div>
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header blete-section-header-parallax wow slideInDown">
                    <h2>My <span class="blete-highlight-text">Specialty</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">下面呢，是我的部分特长。是我这几年学习<br>生涯的结晶、成果。如果我是一名军人，那么下面这些便是我的枪支弹药。我这一生都不会更不可能会<br>抛弃的珍贵。</p>
                </div>
                <!-- Section Header End -->

                <!-- Features -->
                <div class="blete-features">
                    <div class="col-md-4 col-sm-4 col-xs-12 wow rotateInDownLeft">

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-html5"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>HTML5</h3>
                                <p>熟练掌握HTML5<br>并能够随意使用</p>
                            </div>
                        </div>

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fab fa-vuejs"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Vue.js</h3>
                                <p>熟悉一些Vue.js<br>并有一定的使用经验与技巧</p>
                            </div>
                        </div>

                        <!--<div class="blete-blurb-icon-left-square">-->
                            <!--<div class="blete-icon">-->
                                <!--<i class="fa fa-css3"></i>-->
                            <!--</div>-->

                            <!--<div class="blete-blurb-text">-->
                                <!--<h3>Free Smile Support</h3>-->
                                <!--<p>Lorem ipsum dolor sit amet, consectetur adipisicing At.</p>-->
                            <!--</div>-->
                        <!--</div>-->

                    </div>

                    <div class="col-md-4 col-sm-4 col-xs-12 wow slideInUp" data-wow-duration="1s">

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-css3"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>CSS3</h3>
                                <p>精通CSS3<br>及以下版本、且熟练使用</p>
                            </div>
                        </div>

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fab fa-bootstrap"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>bootstrap</h3>
                                <p>bootstrap框架<br>擅长并且可以灵活运用</p>
                            </div>
                        </div>

                        <!--<div class="blete-blurb-icon-left-square">-->
                            <!--<div class="blete-icon">-->
                                <!--<i class="fa fa-mobile"></i>-->
                            <!--</div>-->

                            <!--<div class="blete-blurb-text">-->
                                <!--<h3>Mobile Responsive</h3>-->
                                <!--<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>-->
                            <!--</div>-->
                        <!--</div>-->

                    </div>

                    <div class="col-md-4 col-sm-4 col-xs-12 wow rotateInDownRight">

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fab fa-node-js"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>JavaScript</h3>
                                <p>js的ES6及以下版本<br>皆可以灵活运用</p>
                            </div>
                        </div>

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-mobile"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Mobile Responsive</h3>
                                <p>移动端响应式<br>网页可支持任何尺寸</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Featuers Section End -->


    <!-- =============================
                    Team Section
    ================================== -->

    <!-- Team Section End -->

    <!-- =============================
                    Skill Section
    ================================== -->
    <section id="skill" class="blete-our-skills blete-section-wrapper">
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2>My <span class="blete-highlight-text">Skills</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">专业技能掌握程度的百分比</p>
                </div>
                <!-- Section Header End -->

                <!-- Skills -->
                <div class="blete-skills-wrapper">

                    <div class="col-md-4 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-ps" data-percent="95">
                            <span class="percent"></span>
                            <h3>HTML5</h3>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-php" data-percent="90">
                            <span class="percent"></span>
                            <h3>CSS3</h3>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-wp" data-percent="90">
                            <span class="percent"></span>
                            <h3>Ajax</h3>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-wp" data-percent="90">
                            <span class="percent"></span>
                            <h3>Bootstrap</h3>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-js" data-percent="80">
                            <span class="percent"></span>
                            <h3>Javascript</h3>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-wp" data-percent="80">
                            <span class="percent"></span>
                            <h3>Vue</h3>
                        </div>
                    </div>

                </div>
                <!-- Skills End -->
            </div>
        </div>
    </section>
    <!-- Skill seciton End -->


    <!-- =============================
                Featured Work Section
    ================================== -->
    <section id="featured-works" class="blete-section-wrapper blete-section-work">
        <!-- Container -->
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2>Some Of My <span class="blete-highlight-text">Works</span></h2>
                    <div class="blete-section-divider"></div>
                    </div>
                <!-- Section Header End -->

            </div>
        </div>
        <!-- Container End -->

        <!-- Featured Works Slider -->
        <div class="container-fluid">
            <div class="row-fluid">

                <div class="blete-portfolio-work-slider-section wow fadeIn" data-wow-duration="2s">
                    <div id="featured-work-slider" class="owl-carousel blete-portfolio-works-slider">

                        <!-- Work 1 -->
                        <div class="blete-portfolio-work-item">
                                <img src="images/img-work/work1.jpg" alt="work">
                                <div class="blete-port-work-details">
                                    <ul class="blete-work-meta">
                                        <li class="blete-lighbox"><a href="images/img-work/work1.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                    </ul>
                                </div>
                        </div>
                        <!-- Work 1 End -->

                        <!-- Work 2 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work2.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work2.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 2 End -->

                        <!-- Work 3 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work3.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work3.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 3 End -->

                        <!-- Work 4 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work4.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work4.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 4 End -->

                        <!-- Work 5 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work5.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work5.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 5 End -->

                        <!-- Work 6 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work6.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work6.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 6 End -->

                        <!-- Work 7 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work7.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work7.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 7 End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Featured Works Slider -->

    </section>
    <!-- Featured Work End -->



    <!-- =============================
                Portfolio Section
    ================================== -->
    <!-- Portfolio Section End -->

    <!-- =============================
                Custom Section
    ================================== -->

    <!-- Custom Section End -->


    <!-- =============================
            Testimonial Section
    ================================== -->

    <!-- Testimonial End -->


    <!-- =============================
            Pricing Section
    ================================== -->

    <!-- Contact Section End -->


   <!-- =============================
                Footer Section
    ================================= -->
    <footer>
        <div class="thn">
            <div class="container thn">
                <div class="row">
                    <div class="blete-footer-content">

                        <h6 class="blete-copyright-info">Email: 766778065@qq.com</h6>

                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer End -->


    <!-- =============================
                SCRIPTS
    ================================== -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modernizr.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.scrollUp.min.js"></script>
    <script src="js/jquery.easypiechart.js"></script>
    <script src="js/jquery.countTo.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/jflickrfeed.min.js"></script>
    <script src="js/jquery.fitvids.js"></script>
    <script src="js/jquery.stellar.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/jquery.nav.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/smooth-scroll.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.sliderPro.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/custom.js"></script>

</body>
</html>
